<template>
    <div style="height: 100%">
      <div class="main-tab">
        <x-header id="header" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">服务区</span>
        </x-header>
        <div class="main-headerAndTab">
          <tab bar-active-color="#AD2532" :line-width="2" custom-bar-width="1.43rem" active-color="#AD2532" default-color="#9B9B9B" class="tab">
            <tab-item selected active-class="active1" @click.native="change(item.id)" v-for="(item,index) in catelist" :key="index" v-if="index === 0">{{item.name}}</tab-item>
            <tab-item active-class="active1" @click.native="change(item.id)" v-for="(item,index) in catelist" :key="index"  v-if="index !== 0">{{item.name}}</tab-item>
          </tab>
          <group>
            <div class="personal" v-for="(item,index) in needlist" :key="item.id"  v-show="flag4">
              <div class="personal-msg">
                <div class="personal-msg-left">
                  <img :src="item.img" class="personal-msg-img">
                  <div class="personal-info">
                    <span class="personal-name">{{item.name}}</span>
                    <span class="personal-date">{{item.date}}</span>
                  </div>
                </div>
                <div class="personal-msg-right">预算金额：<span>{{item.money}}</span>元</div>
              </div>
              <div class="personal-describe">{{item.describe}}</div>
            </div>
            <div class="personal" v-for="(item,index) in needlist" :key="item.id" v-show="flag3">
              <div class="personal-msg">
                <div class="personal-msg-left">
                  <img :src="item.img" class="personal-msg-img">
                  <div class="personal-info">
                    <span class="personal-name">{{item.name}}</span>
                    <span class="personal-date">{{item.date}}</span>
                  </div>
                </div>
              </div>
              <div class="personal-describe">{{item.describe}}</div>
            </div>
          </group>
          <div class="more">没有更多了哦～</div>
        </div>
      </div>
      <div class="main-bottom" @click="demand">
        <x-button class="rel-button"><span>发布需求</span></x-button>
      </div>
    </div>
</template>

<script>
  import  {getDemandCategory,getDemandList} from '@/api/need'
    export default {
        name: "service",
      methods:{
        back(){
          this.$router.go(-1)
        },
        change(id){
          this.demandCategoryId=id;
        },
        demand(){
          this.$router.push({
            name:'demand'
          })
        },
        getDemandCategory(){
          getDemandCategory({}).then(res =>{
            console.log(res)
            this.catelist=res
          })
        },
        getDemandList(){
          getDemandList(this.demandCategoryId).then(res =>{
            console.log(res)
          })
        }
      },
      data(){
        return{
          flag1:true,
          flag2:false,
          flag3:false,
          flag4:false,
          demandCategoryId:2,
          catelist:[],
          needlist:[
            {
              id:0,
              img:'../../../static/img/my-off.png',
              name:'王小二',
              date:'2019-01-01',
              money:5000,
              describe:'我要一条中华、一条万宝路、一条利群～～'
            },
            {
              id:1,
              img:'../../../static/img/my-off.png',
              name:'王小二',
              date:'2019-01-01',
              money:5000,
              describe:'我要一条中华、一条万宝路、一条利群～～'
            },
            {
              id:2,
              img:'../../../static/img/my-off.png',
              name:'王小二',
              date:'2019-01-01',
              money:5000,
              describe:'我要一条中华、一条万宝路、一条利群～～'
            },
          ]
        }
      },
      created(){
          this.getDemandCategory();
          this.getDemandList();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .active1{
    font-weight: bolder;
  }
  .tab{
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02), 0 2px 4px 0 rgba(173,37,50,0.05);
  }
  .personal{
    height: 7.93rem;
    border-bottom: solid 1px #f5f5f5;
  }
  .personal-msg{
    display: flex;
    justify-content: space-between;
  }
  .personal-msg-right{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-top: 1.07rem;
  }
  .personal-msg-right span{
    font-size: 18px;
    color: #AD2532;
    letter-spacing: -0.43px;
    text-align: justify;
  }
  .personal-msg-left{
    display: flex;
    flex-direction: row;
    margin-left: 1.07rem;
    margin-top: 1.07rem;
  }
  .personal-msg-img{
    width: 3.57rem;
    height: 3.57rem;
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
  }
  .personal-info{
    display: flex;
    flex-direction: column;
    margin-left: 1.07rem;
  }
  .personal-name{
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
  }
  .personal-date{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-top: 0.36rem;
  }
  .personal-describe{
    margin-left: 5.71rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-top: 1.08rem;
  }
  .main-bottom{
    width: 100%;
    height: 9%;
    position: fixed;
    bottom: 0;
    left:0;
  }
  .rel-button{
    width: 24.64rem;
    height: 3.21rem;
    margin-top: 0.79rem;
    margin-left: 1.07rem;
    background: #AD2532;
    border-radius: 1.61rem;
  }
  .rel-button span{
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
  }
  .more{
    position: absolute;
    left: 50%;
    margin-left: -3.43rem;
    margin-top: 1.07rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
</style>
